<template>
  <div class="openlayers-map-container">
    <div
      style="width: 100%; height: 100%"
      id="map-container"
      ref="mapRef"
    ></div>
    <!-- 工具箱 -->
    <div class="map-tools">
      <el-dropdown v-if="showTools">
        <el-button icon="el-icon-s-tools">工具箱</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <i class="el-icon-refresh"></i>
            <span>复位</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <i class="el-icon-wind-power"></i>
            <span>距离</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <i class="el-icon-location"></i>
            <span>拾取</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <i class="el-icon-delete"></i>
            <span>清除</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-popover placement="bottom-end" width="300" trigger="click">
        <el-button slot="reference" icon="el-icon-coin">图层控制</el-button>
        <!-- <LayerFilter
          v-if="mapInitialized"
          :checkedKeys="checkedKeys"
          @change="layerChange"
          @loaded="handleLoaded"
        /> -->
      </el-popover>
    </div>
    <div class="map-operate"></div>
    <div id="mapType-wrapper"></div>
    <div id="left-panel"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, PropType } from "vue";
// import LayerFilter from "./layerFilter.vue";
import { useMapInitialization } from "@/hooks/useMapInitialization";
// import { useCityLabel } from "@/hooks/useCityLabel";
// import { useRiverLabel } from "@/hooks/useRiverLabel";
// import { useChangshaLayer } from "@/hooks/useChangshaLayer";

// 定义 props 和 emits
const props = defineProps({
  center: {
    type: Object as PropType<[number, number]>,
    required: true,
  },
  zoom: {
    type: Number,
    required: true,
  },
  mapKey: {
    type: String,
    required: true,
  },
  showTools: {
    type: Boolean,
    default: true, // 设置默认值
  },
});

const emit = defineEmits(["map-ready"]);

// 组件内部状态
const mapRef = ref<HTMLElement | null>(null);
const mapInitialized = ref(false);
const checkedKeys = ref<string[]>([]);

// 调用组合函数
const { map, tdtLayer, initMap } = useMapInitialization(props);
// const { setCityLabel } = useCityLabel(map);
// const { setRiverLabel } = useRiverLabel(map);
// const { loadChangshaLayer } = useChangshaLayer(map);

onMounted(() => {
  mapRef.value = document.getElementById("map-container");
  if (mapRef.value) {
    initMap(mapRef.value)
      .then(() => {
        console.log("地图初始化完毕");
        // loadChangshaLayer();
        // setCityLabel();
        // setRiverLabel();
      })
      .then(() => {
        mapInitialized.value = true;
        emit("map-ready", map.value, tdtLayer.value);
      })
      .catch((error) => {
        console.error(
          "Error during map initialization or layer loading:",
          error
        );
      });
  }
});

// 方法：处理图层变化和加载完成
function layerChange(keys: string[]) {
  checkedKeys.value = keys;
  // 处理图层变化逻辑
}

function handleLoaded(leafNodeMap: any, leafIdMap: any) {
  // 处理图层加载完成逻辑
}
</script>

<style scoped>
.openlayers-map-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.map-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 14px;
  line-height: 14px;
  color: #606266;
  z-index: 10;
  display: flex;
}
.ol-custom-overviewmap {
  position: absolute;
  bottom: 10px;
  right: 10px !important;
  width: 105px;
  height: 105px;
}
.ol-overviewmap {
  left: auto;
  right: 10px !important;
  border: 2px wheat solid;
}
.ol-overviewmap-box {
  border: 1px solid red;
}
</style>
